"use client";

import React from "react";
import {useDisclosure} from "@mantine/hooks";
import {
  Modal,
  Button,
  Fieldset,
  NumberInput,
  Group,
  Stack,
  Alert,
  Text,
  TextInput,
} from "@mantine/core";
import {IconVectorSpline} from "@tabler/icons-react";

export const IpdModify = () => {
  const [opened, {open, close}] = useDisclosure(false);

  return (
    <>
      <Modal opened={opened} onClose={close} title="编辑仿真结果" size="xl">
        <Stack>
          <Alert variant="light" color="green" icon={<IconVectorSpline />}>
            <Group>
              <Text size="sm">局向名称：{"北京_N2_BB_5-上海_N2_BB_5"}</Text>
              <Text size="sm">流量需求：{"2312.24"}Gbps</Text>
            </Group>
          </Alert>

          <Fieldset legend="现状带宽：当前局向带宽" disabled>
            <Group justify="space-between" grow>
              <NumberInput label="总计（Gbps）" placeholder="Total" />
              <NumberInput label="400G" placeholder="400G" />
              <NumberInput label="100G" placeholder="100G" />
              <NumberInput label="10G" placeholder="10G" />
              <NumberInput label="1G" placeholder="1G" />
              <TextInput label="带宽利用率" placeholder="%" />
            </Group>
          </Fieldset>
          <Fieldset
            legend="仿真带宽：根据流量需求+最短路径算法+带宽利用率+最小颗粒度算出的理论值"
            disabled
          >
            <Group justify="space-between" grow>
              <NumberInput label="总计（Gbps）" placeholder="Total" />
              <NumberInput label="400G" placeholder="400G" />
              <NumberInput label="100G" placeholder="100G" />
              <NumberInput label="10G" placeholder="10G" />
              <NumberInput label="1G" placeholder="1G" />
              <TextInput label="带宽利用率" placeholder="%" />
            </Group>
          </Fieldset>
          <Fieldset variant="filled">
            <Fieldset legend="扩容规模（理论计算结果）" disabled>
              <Group justify="space-between" grow>
                <NumberInput label="总计（Gbps）" placeholder="Total" />
                <NumberInput label="400G" placeholder="400G" />
                <NumberInput label="100G" placeholder="100G" />
                <NumberInput label="10G" placeholder="10G" />
                <NumberInput label="1G" placeholder="1G" />
              </Group>
            </Fieldset>
            <Fieldset legend="扩容规模（手动调整结果）">
              <Group justify="space-between" grow>
                <NumberInput label="总计（Gbps）" placeholder="Total" disabled />
                <NumberInput label="400G" placeholder="400G" />
                <NumberInput label="100G" placeholder="100G" />
                <NumberInput label="10G" placeholder="10G" />
                <NumberInput label="1G" placeholder="1G" />
              </Group>
            </Fieldset>
          </Fieldset>
          <Fieldset legend="设计带宽：等于现状带宽+设计扩容" disabled>
            <Group justify="space-between" grow>
              <NumberInput label="总计（Gbps）" placeholder="Total" />
              <NumberInput label="400G" placeholder="400G" />
              <NumberInput label="100G" placeholder="100G" />
              <NumberInput label="10G" placeholder="10G" />
              <NumberInput label="1G" placeholder="1G" />
              <TextInput label="带宽利用率" placeholder="%" />
            </Group>
          </Fieldset>
        </Stack>
        <Group justify="flex-end" mt="md">
          <Button variant="default">取消</Button>
          <Button>确定</Button>
        </Group>
      </Modal>
      <Button variant="default" onClick={open}>
        编辑按钮
      </Button>
    </>
  );
};
